<script setup>
    import * as echarts from "echarts";
    import { watch } from "vue";
    import { useStore } from 'vuex'

    const props = defineProps({
        mapList: {
            type: Array,
            default: []
        }
    })

    const store = useStore()

    let eCharts = null;
    let lineChart = $ref(null);
    
    // x轴数据
    let xData = $ref([])

    // y轴数据
    let yData1 = $ref([])
    let yData2 = $ref([])


    watch(
        () => props.mapList,
        (newV, oldV) => {
            init();
        }
    );

    watch(
        () => store.state.currentCityCode,
        (newV, oldV) => {
            eCharts.clear()
            init('refresh')
        }
    );
    

    const init = (type) => {
        xData = []
        yData1 = []
        yData2 = []
        props.mapList.forEach(item => {
            xData.push(item.val1)
            yData1.push(item.val4.split('人')[0])
            yData2.push(item.val3.split('人')[0])
        })

        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                },
            },
            legend: {
                right: '0',
                top: '5%',
                textStyle: {
                    fontSize: 14,// 字体大小
                    color: '#ffffff'// 字体颜色
                },
            },
            grid: {
                left: '0',
                top: '10%',
                bottom: '5%',
                right: '0',
                containLabel: true,
            },
            xAxis: {
                axisLabel: {
                    color: "#fff",
                    interval: 0,
                    fontSize: 14
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                },
                z: 10,
                data: xData,
            },
            yAxis: {
                axisLine: {
                    show: true,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    color: "#fff",
                },
            },
            series: [
                {
                    name: '公益岗上岗人数',
                    type: 'bar',
                    barWidth: 12,
                    barGap: '10%',
                    emphasis: {
                        focus: 'series',
                    },
                    data: yData1,
                    itemStyle: {
                        color: '#FAC858',
                        barBorderRadius: [9, 9, 0, 0],
                    },
                },
                {
                    name: '2022年计划拓岗人数',
                    type: 'bar',
                    barWidth: 12,
                    barGap: '10%',
                    emphasis: {
                        focus: 'series',
                    },
                    itemStyle: {
                        color: '#77FBEC',
                        barBorderRadius: [9, 9, 0, 0],
                    },
                    data: yData2,
                }
            ],
        }

        if(!type) eCharts = echarts.init(lineChart);
        eCharts.setOption(option);
    }

</script>

<template>
    <div class="card-box city-comparison-wrap">
        <card-title title="各区县人员统计对比"></card-title>

        <div class="line-chart" ref="lineChart"></div>
    </div>
</template>

<style scoped lang="scss">
@import "../../../../../assets/css/common.scss";
    .city-comparison-wrap{
        height: 276px;
        .line-chart{
            height: 230px;
        }
    }
</style>